<script setup>
import PageLayout from "@/components/Layout/PageLayout/PageLayout.vue";
import MenuBox from "@/components/MenuBox/MenuBox.vue";
import VolPanel from "./child/VolPanel/VolPanel.vue";
import LinePanel from "./child/LinePanel/LinePanel.vue";
import DevPanel from "./child/DevPanel/DevPanel.vue";
import ToolSwitch from "./child/ToolSwitch/ToolSwitch.vue";
import MyBtn from "@/components/MyBtn/MyBtn.vue";
import ueMsg from "/public/js/app.js";
import bus from "@/utils/bus.js";
import { onMounted, ref, markRaw } from "vue";

const showList = ref(true);

const menuBtns = markRaw([
  { component: DevPanel, label: "设备可视化", ueId: "2-1" },
  { component: VolPanel, label: "容量可视化", ueId: "2-2" },
  { component: LinePanel, label: "配线可视化", ueId: "2-3" },
]);
const menuBtnPick = ref(0);
const treePick = ref([]);
const btnPickChange = (item, index) => {
  ueMsg.apiSend({ MenuStatus: item.ueId });
  menuBtnPick.value = index;
};
const levelClk = (item) => {
  if (menuBtnPick.value === 0) {
    ueMsg.apiSend({ SearchEquipment: item.ueRelation ?? item.ueId });
  } else if (menuBtnPick.value === 1) {
    ueMsg.apiSend({ SelectCapacityDevice: item.ueId });
  }
};
const goback = () => {
  ueMsg.apiSend({ MenuStatus: menuBtns[menuBtnPick.value].ueId });
};

//点击进入机柜单独层级后隐藏设备菜单列表
const HiddenHierarchyMenu = (e) => {
  if (e === "0") {
    showList.value = true;
  } else {
    showList.value = false;
  }
};

onMounted(() => {
  bus.on("HiddenHierarchyMenu", HiddenHierarchyMenu);
});
</script>

<template>
  <PageLayout>
    <template #btn>
      <div class="btn-box">
        <MyBtn
          :key="btnIndex"
          v-for="(btn, btnIndex) of menuBtns"
          :label="btn.label"
          :active="menuBtnPick === btnIndex"
          @click.native="btnPickChange(btn, btnIndex)"
        />
        <ToolSwitch :isShow="treePick.includes('020C2')" />
      </div>
    </template>
    <template #left>
      <div class="menu-box" v-show="showList">
        <transition name="left-in" mode="out-in">
          <MenuBox
            v-model:treePick="treePick"
            :menuBtns="menuBtns"
            :key="menuBtnPick"
            @levelClk="levelClk"
            @goback="goback"
          />
        </transition>
      </div>
    </template>
    <template #right>
      <div class="child-box">
        <transition name="right-in" mode="out-in">
          <component :is="menuBtns[menuBtnPick].component" :key="menuBtnPick"></component>
        </transition>
      </div>
    </template>
  </PageLayout>
</template>

<style scoped lang="scss">
.btn-box {
  height: 100%;
  display: flex;
  gap: 20px;
}

.menu-box {
  height: 100%;
}

.child-box {
  width: 885px;
  height: 100%;
}
</style>
